@keyframes loading {
    from  {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}
body {
    background-color: #f2f2f2;
}
.layout {
    margin-top: 90/37.5rem;
    margin-bottom: 121/37.5rem;
    .header {
        width: 100%;
        height: 90/37.5rem;
        text-align: center;
        line-height: 90/37.5rem;
        font-size: 34/37.5rem;
        color: #fff;
        background-color: #141414;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        .backArrow {
            width: 40/37.5rem;
            height: 90/37.5rem;
            background: url("../../img/back_W@3x.png") no-repeat left center;
            background-size: 60/37.5rem 60/37.5rem;
            position: absolute;
            top: 0;
            left: 25/37.5rem;
        }
    }
    .loadingMarsk {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;
        background-color: rgb(255,255,255);
        .loadingPic {
            width: 72/37.5rem;
            height: 72/37.5rem;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -36/37.5rem;
            margin-left: -36/37.5rem;
            .rotatePic {
                width: 72/37.5rem;
                height: 72/37.5rem;
                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -36/37.5rem;
                margin-left: -36/37.5rem;
                animation: loading 1s linear infinite;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            } 
            .centerPic {
                width: 62/37.5rem;
                height: 62/37.5rem;
                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -31/37.5rem;
                margin-left: -31/37.5rem;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .orderDetail {
        .address {
            width: 100%;
            height: 170/37.5rem;
            margin-bottom: 20/37.5rem;
            background-color: #fff;
            .leftIcon {
                float: left;
                width: 120/37.5rem;
                height: 170/37.5rem;
                background: url("../../img/DD_place@3x.png") no-repeat center center;
                background-size: 72/37.5rem 72/37.5rem;
            }
            .center {
                float: left;
                width: 560/37.5rem;
                height: 170/37.5rem;
                border-bottom: 1px solid #ebebeb;
                .nameAndPhone {
                    margin-top: 30/37.5rem;
                    .name {
                        float: left;
                        font-size: 28/37.5rem;
                        color: #1f1f1f;
                    }
                    .phone {
                        float: right;
                        font-size: 28/37.5rem;
                        color: #1f1f1f;
                    }
                }
                .logisticsMsg {
                    font-size: 26/37.5rem;
                    color: #1f1f1f;
                    margin-top: 20/37.5rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2; 
                    span {
                        color: #a3a3a3;
                    }
                }
            }
            .rightIcon {
                float: left;
                width: 70/37.5rem;
                height: 170/37.5rem;
                border-bottom: 1px solid #ebebeb;
                background: url("../../img/llgo@3x.png") no-repeat center center;
                background-size: 42/37.5rem 42/37.5rem;
            }
        }
        .productMsg {
            padding: 19/37.5rem;
            margin-bottom: 20/37.5rem;
            background-color: #fafafa;
            .productItem {
                margin-top: 20/37.5rem;
                position: relative;
                .productPic {
                    float: left;
                    width: 200/37.5rem;
                    height: 200/37.5rem;
                    border: 1px solid #ebebeb;
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                .productText {
                    float: left;
                    width: 415/37.5rem;
                    margin-left: 22/37.5rem;
                    .productName {
                        font-size: 26/37.5rem;
                        color: #141414;
                        margin: 18/37.5rem 0;
                    }
                    .productSize {
                        font-size: 22/37.5rem;
                        color: #bdbdbd;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                    }
                    .price {
                        font-size: 22/37.5rem;
                        color: #141414;
                        margin-top: 20/37.5rem;
                    }
                    .dcn {
                        font-size: 22/37.5rem;
                        margin-top: 20/37.5rem;
                        .cash {
                            padding-left: 10/37.5rem;
                        }
                    }
                }
                .productNum {
                    float: right;
                    font-size: 26/37.5rem;
                    color: #646464;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }
            }
            .productItem:nth-of-type(1) {
                margin-top: 0;
            }
        }
        .payType {
            margin-bottom: 20/37.5rem;
            .diamond,.red,.coin {
                width: 100%;
                height: 100/37.5rem;
                border-bottom: 1px solid #ebebeb;
                padding: 0 20/37.5rem;
                background-color: #fff;
                box-sizing: border-box;
                .diamondPro,.redPro,.coinPro {
                    float: left;
                    height: 100/37.5rem;
                    font-size: 28/37.5rem;
                    color: #141414;
                    line-height: 100/37.5rem;
                }
                .selBtn {
                    float: right;
                    width: 98/37.5rem;
                    height: 100/37.5rem;
                    // background: url("../../img/btn_off@3x.png") no-repeat left center;
                    // background-size: 98/37.5rem 50/37.5rem;
                    img {
                        display: block;
                        margin-top: 25/37.5rem;
                        width: 98/37.5rem;
                        height: 50/37.5rem;
                    }
                }
            }
            .sendWay {
                width: 100%;
                height: 80/37.5rem;
                font-size: 28/37.5rem;
                color: #141414;
                padding: 0 20/37.5rem;
                border-bottom: 1px solid #ebebeb;
                background-color: #fff;
                box-sizing: border-box;
                .text,.way {
                    float: left;
                    height: 80/37.5rem;
                    line-height: 80/37.5rem;
                }
                .way {
                    float: right;
                }
            }
            .buyMsg {
                width: 100%;
                height: 80/37.5rem;
                padding: 0 20/37.5rem;
                background-color: #fff;
                box-sizing: border-box;
                .title {
                    float: left;
                    height: 80/37.5rem;
                    line-height: 80/37.5rem;
                    color: #1f1f1f;
                    font-size: 28/37.5rem;
                }
                input {
                    float: left;
                    border: none;
                    outline: none;
                    width: 540/37.5rem;
                    height: 80/38.5rem;
                    color: #d6d6d6;
                    font-size: 28/37.5rem;
                    margin-left: 50/37.5rem;
                    box-sizing: border-box;
                }
            }
        }
        .costDetail {
            padding: 25/37.5rem 20/37.5rem;
            background-color: #fff;
            .total {
                font-size: 28/37.5rem;
                color: #141414;
                margin-bottom: 23/37.5rem;
               .text {
                   float: left;
               }
               .money {
                   float: right;
                   color: #ffa31a;
                   font-weight: 700;
               }
            }
            .total:nth-last-of-type(1) {
                margin-bottom: 0;
            }
        }
        .footBtn {
            width: 100%;
            height: 101/37.5rem;
            border-top: 1px solid #ebebeb;
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            .left {
                float: left;
                width: 68%;
                height: 100%;
                text-align: right;
                line-height: 100/37.5rem;
                font-size: 32/37.5rem;
                color: #141414;
                background-color: #fff;
                box-sizing: border-box;
                padding-right: 40/37.5rem;
                span {
                    color: #ffa31a;
                    font-weight: 700;
                }
            }
            .right {
                float: left;
                width: 32%;
                height: 100/37.5rem;
                background-color: #212121;
                text-align: center;
                line-height: 100/37.5rem;
                font-size: 32/37.5rem;
                color: #fff;
            }
        }
    }
    .tips {
        display: none;
        width: 400/37.5rem;
        height: 80/37.5rem;
        font-size: 30/37.5rem;
        line-height: 80/37.5rem;
        text-align: center;
        color: #fff;
        border-radius: 40/37.5rem;
        opacity: 0;
        background-color: #1f1f1f;
        position: fixed;
        bottom: 150/37.5rem;
        left: 50%;
        margin-left: -200/37.5rem;
    }
}